<template>
    <div class="center">
        <div class="center-form">
          <el-form inline label-width="120px" @submit.native.prevent>
            <el-form-item label="活动名称">
               <el-input v-model="listParsem.name" placeholder="请输入活动名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="商户名称">
               <el-input v-model="listParsem.merchantName" placeholder="请输入商户名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label=" ">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="initList"
                >搜索</el-button>
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="center-construct">
            <el-button type="primary" style="margin-right: 30px;" @click="missionDialogClick">新增任务</el-button>
        </div>
        <div class="center-table">
            <el-table
            :data="appTableList"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            :header-cell-style="tableHeaderColor"
            v-loading="loading">
            <el-table-column
            width="150"
            prop="plantActivityId"
            label="活动ID"
            align="center"
          ></el-table-column>
         <el-table-column
            width="130"
            prop="name"
            label="活动名称"
            align="center"
          ></el-table-column>
          <el-table-column
            width="200"
            prop="smid"
            label="二级商户smid"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="pid"
            width="130"
            label="二级商户pid"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="merchantName"
            label="二级商户名称"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="appId"
            label="小程序id"
            width="170"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="appName"
            label="小程序名称"
            width="170"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
            width="170"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
            width="170"
            align="center"
          ></el-table-column>
          <!--
          <el-table-column
            prop="taskTemplateCode"
            label="任务模板编号"
            width="170"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="equityTemplateCode"
            label="权益模板编号"
            width="170"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="title"
            label="活动标题"
            width="170"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="copywriting"
            label="活动文案"
            width="170"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="bannerPic"
            label="banner图片"
            width="170"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="description"
            label="活动介绍"
            width="170"
            align="center"
          ></el-table-column> -->
          <!-- <el-table-column
            prop="rule"
            label="活动规则"
            width="170"
            align="center"
          ></el-table-column> -->
          <el-table-column
            prop="rule"
            label="状态"
            width="170"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
                <p>{{ funCardStatus(scope.row.status) }}</p>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="140"
          >
            <template slot-scope="scope">
                <el-button
                  v-if="scope.row.status == 'DRAFT'"
                  type="text"
                  @click="notifyMerchant(scope.row)"
                >通知</el-button>
            </template>
          </el-table-column>
        </el-table>
       <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="listParsem.pageSize"
          :current-page.sync="listParsem.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
    </div>
        </div>
        <el-dialog
         title="新增任务"
         :visible.sync="missionVisible"
         width="800px"
         >
         <div class="construct-dialog">
            <el-form :model="missionForm" inline :rules="missionFormRules" ref="missionForm" label-width="120px" >
                <el-form-item label="活动名称" prop="name">
                   <el-input v-model="missionForm.name" placeholder="请输入活动名称"></el-input>
               </el-form-item>
               <el-form-item label="服务商pid" prop="isvPid">
                   <el-input v-model="missionForm.isvPid" disabled placeholder="请输入服务商pid"></el-input>
               </el-form-item>
               <el-form-item label="商户smid" prop="smid">
                   <el-input v-model="missionForm.smid"  placeholder="请输入商户smid"></el-input>
               </el-form-item>
               <el-form-item label="商户pid" prop="pid">
                   <el-input v-model="missionForm.pid"  placeholder="请输入商户pid"></el-input>
               </el-form-item>
               <el-form-item label="商户名称" prop="merchantName">
                   <el-input v-model="missionForm.merchantName"  placeholder="请输入二级商户名称"></el-input>
               </el-form-item>
               <el-form-item label="小程序appid" prop="appId">
                   <el-input v-model="missionForm.appId"  placeholder="请输入商户小程序appid"></el-input>
               </el-form-item>
               <el-form-item label="小程序名称" prop="appName" style="width:100%;">
                   <el-input v-model="missionForm.appName"  placeholder="请输入小程序名称"></el-input>
               </el-form-item>
               <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                style="width:200px;"
                value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="missionForm.startTime"
                  type="datetime"
                  placeholder="选择开始时间">
                </el-date-picker>
               </el-form-item>
               <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="missionForm.endTime"
                  type="datetime"
                  placeholder="选择结束时间">
                </el-date-picker>
               </el-form-item>
               <el-form-item label="任务模板编号" prop="taskTemplateCode" >
                   <el-input v-model="missionForm.taskTemplateCode"  placeholder="请输入任务模板编号"></el-input>
               </el-form-item>
               <el-form-item label="权益模板编号" prop="equityTemplateCode" >
                   <el-input v-model="missionForm.equityTemplateCode"  placeholder="请输入权益模板编号"></el-input>
               </el-form-item>
               <el-form-item label="活动标题" prop="title" >
                   <el-input v-model="missionForm.title"  placeholder="请输入活动标题"></el-input>
               </el-form-item>
               <el-form-item label="活动文案" prop="copywriting" >
                   <el-input v-model="missionForm.copywriting"  placeholder="请输入活动文案"></el-input>
               </el-form-item>
               <el-form-item label="活动图片" prop="bannerPic">
                <el-upload
                   :action="uploadUrl"
                   :headers="token"
                     :on-success="bannerPicUpLoadSuccess"
                     :show-file-list="false"
                     >
                     <img v-if="missionForm.bannerPic" :src="missionForm.bannerPic" class="avatar">
                     <i v-else class="el-icon-plus"></i>
                   </el-upload>
               </el-form-item>
               <el-form-item label="活动介绍" prop="description" style="width:100%" >  
                   <el-input type="textarea" v-model="missionForm.description" style="width:550px;" :rows="2"  placeholder="请输入活动介绍"></el-input>
               </el-form-item>
               <el-form-item label="活动规则" prop="rule" style="width:100%" >  
                   <el-input type="textarea" v-model="missionForm.rule" style="width:550px;" :rows="2"  placeholder="请输入活动介绍"></el-input>
               </el-form-item>
               <el-form-item label="广告配置" prop="bannerConfig" style="width:100%" >
                  <div v-for="(item , index) in bannerConfig" :key="index" style="margin-bottom:20px;"> 
                     <el-upload
                      :action="uploadUrl"
                      :headers="token"
                      :on-success="licenseUpLoadSuccess"
                      :show-file-list="false"
                      >
                      <img v-if="bannerConfig[index].picPath" :src="bannerConfig[index].picPath" class="avatar">
                      <i v-else class="el-icon-plus"></i>
                     </el-upload>
                    <el-input v-model="bannerConfig[index].skipUrl"  placeholder="请输入跳转链接"></el-input>
                  </div>
                   <el-button type="primary" style="margin-top:10px;" @click="addBannerConfig" >添加配置</el-button>
               </el-form-item>
               <el-form-item label="优惠券id" prop="voucherIdList" style="width:100%" >  
                   <el-input type="textarea" v-model="missionForm.voucherIdList" style="width:550px;" :rows="2"  placeholder="多个优惠券请用,分割"></el-input>
               </el-form-item>
               <el-form-item label="租户id" prop="tenantId" style="width:100%" >  
                   <el-input type="textarea" v-model="missionForm.tenantId" style="width:550px;" :rows="2"  placeholder="请输入租户id"></el-input>
               </el-form-item>
            </el-form>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="missionVisible = false">取 消</el-button>
           <el-button type="primary" :loading="missionLoading" @click="addMissionClick">确 定</el-button>
         </span>
       </el-dialog>
    </div>
</template>
<script>
import { planetQueryPage , planetCreate , planetNotify } from '@/api/fetchApi'
export default{
    data(){
        return{
            uploadUrl: process.env.VUE_APP_BASE_URL + "/product/v31/api/merchant/uploadfile/upload",
            token: { token: sessionStorage.getItem("token") },
            listParsem:{pageNumber:1,pageSize:10,tenantId:'tnt-231226dm6ojDSVEh8t9vbZqLdC3D'}, 
            bannerConfig:[{}],
            missionForm:{
              tenantId:'tnt-231226dm6ojDSVEh8t9vbZqLdC3D',
                isvPid:'2088931208187951'
            },
            missionFormRules:{
                name:[{ required: true, message: '请输入活动名称', trigger: 'blur' }],
                isvPid:[{ required: true, message: '请输入服务商pid', trigger: 'blur' }],
                smid:[{ required: true, message: '请输入商户smid', trigger: 'blur' }],
                pid:[{ required: true, message: '请输入商户pid', trigger: 'blur' }],
                merchantName:[{ required: true, message: '请输入二级商户名称', trigger: 'blur' }],
                appId:[{ required: true, message: '请输入商户小程序appid', trigger: 'blur' }],
                appName:[{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
                startTime:[{ required: true, message: '请选择开始时间', trigger: 'change' }],
                endTime:[{ required: true, message: '请选择结束时间', trigger: 'change' }],
                taskTemplateCode:[{ required: true, message: '请输入任务模板编号', trigger: 'blur' }],
                equityTemplateCode:[{ required: true, message: '请输入权益模板编号', trigger: 'blur' }],
                title:[{ required: true, message: '请输入活动标题', trigger: 'blur' }],
                copywriting:[{ required: true, message: '请输入活动文案', trigger: 'blur' }],
                bannerPic:[{required: true, validator:(rule , value , callback)=>{
                    if(this.missionForm.bannerPic){
                        callback();
                    }else{
                        callback(new Error('请上传活动图片！'));
                    }
                 } }],
                 description:[{ required: true, message: '请输入活动介绍', trigger: 'blur' }],
                 rule:[{ required: true, message: '请输入活动规则', trigger: 'blur' }],
                 bannerConfig:[{required: false, validator:(rule , value , callback)=>{
                     if(this.bannerConfig[0].picPath || this.bannerConfig[0].skipUrl){
                        const data =  this.bannerConfig.every(item=> item.picPath && item.skipUrl)
                        if(data){
                            if(!this.bannerConfigRuleSatus){
                              callback(new Error('请补充广告配置'));
                            }else{
                                this.bannerConfigRuleSatus = true
                                callback();
                            }
                            
                        }else{
                            callback(new Error('请补充广告配置'));
                        }
                    }else{
                        if(!this.bannerConfigRuleSatus){
                            callback(new Error('请补充广告配置'));
                        }else{
                            this.bannerConfigRuleSatus = true
                            callback();
                        }
                     }
                 } }],
            },
            missionVisible:false,
            missionLoading:false,
            bannerConfigRuleSatus:true,
            total:0,
            appTableList:[]
        }
    },
    mounted(){
      this.initList()
    },
    methods:{
        async initList(){
           const res = await planetQueryPage(this.listParsem)
           this.total = res.total
           this.appTableList = res.list
           console.log(res)
        },
        async addBannerConfig(){
            if(this.bannerConfig.length  == 3){
                  this.$message.error('广告配置已达到最大数量')
              }else {
                this.bannerConfigRuleSatus = false
                this.$refs.ruleForm.validateField('bannerConfig')
                if(this.bannerConfig[0].picPath || this.bannerConfig[0].skipUrl){
                   const data =  this.bannerConfig.every(item=> item.picPath && item.skipUrl)
                   if(data){
                      if(this.bannerConfig.length  == 3){
                        this.$message.error('广告配置已达到最大数量')
                      }else{
                        this.bannerConfigRuleSatus = true
                        this.$refs.ruleForm.validateField('bannerConfig')
                        this.bannerConfig.push({})
                      }
                   }
                }
              }
        },
       async notifyMerchant(v){
          const res = await  planetNotify({activityCode:v.activityCode,tenantId:'tnt-231226dm6ojDSVEh8t9vbZqLdC3D'})
          console.log(res)
          if(res){
            this.$message.success('通知成功！')
            this.initList()
          }
          // if(res.code == '10000'){
             
          // }else{
          //   this.$message.error(res.subMsg)
          // }
        },
       async  addMissionClick(v){
          const valid = await this.$refs.missionForm.validate()
          if(valid){
            if(this.bannerConfig[0].picPath){
              this.missionForm.bannerConfig =  this.bannerConfig
            }
             const res = await  planetCreate(this.missionForm)
             if(res.code == '10000'){
                this.$message.success('创建成功')
                this.initList()
                this.missionVisible = false
             }else{
               this.$message.error(res.subMsg)
             }
          }
        },
        funCardStatus(v){
          const list = [ {value:'DRAFT' , label:'草稿'} ,{value:'WAIT_CONFIRM' , label:'商户确认中'} , {value:'NOT_START' , label:'未启动'} , {value:'ONGOING' , label:'进行中'} , {value:'PAUSE' , label:'暂停'},{value:'END' , label:'已结束'}]
          const data = list.find(item=>item.value == v)
          return data.label
        },
        bannerPicUpLoadSuccess(response){
            this.missionForm.bannerPic = response.data.filePath
            this.$forceUpdate()
        },
        licenseUpLoadSuccess(response){
            this.bannerConfig[this.bannerConfig.length - 1].picPath = response.data.filePath
            this.$forceUpdate()
        },
        missionDialogClick(){
           this.missionVisible = true
        },
        handleCurrentChange(val) {
          this.listParsem.pageNumber = val;
          this.initGetUploadInfo()
       },
        sizechange(val) {
            this.listParsem.pageSize = val;
            this.initGetUploadInfo()
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
    }
}
</script>

<style scoped>
.center{
    width: 100%;
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
}
.center-form{
  padding: 0 22px;
}
.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
.center-table{
    margin-top: 30px;
    padding: 0 20px;
}
.construct-dialog{
    height: 60vh;
    overflow-y: auto;
}
::v-deep .el-upload--text{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
/* 针对 Firefox */
.construct-dialog {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.construct-dialog::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.construct-dialog {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.construct-dialog {
  overflow: auto;
}
.avatar{
  width: 160px;
  height: 160px;
}
</style>